<template>
  <!-- 班级 和 头像 新增 待处理 -->
  <div class="addStudent">
    <h3>新增学生信息</h3>
    <p>
      <label for="studentName">姓名</label><br/>
      <input type="text" id='studentName' v-model.lazy='addStudentData.name'>
    </p>
    <p>
      <label for="studentAge">年龄</label><br/>
      <input type="number" id="studentAge" v-model.lazy='addStudentData.age'>
    </p>
    <p>性别
      <label for="studentMale">男</label><input type="radio" id='studentMale' name='studentGender' value='male' v-model='addStudentData.gender'>
      <label for="studentFemale">女</label><input type="radio" id="studentFemale" name='studentGender' value='female' v-model='addStudentData.gender'>
    </p>
    <!-- 所属班级渲染（目前自增）  -->
    <p>所属班级
      <select name="classList" id="classList" v-model='addStudentData.classId'>
        <option value="6279d6c77128c33dd907e00d">re</option>
      </select>
    </p>
    <div> 
      <p class="uploadImgBox">选择头像: <input type="file" value="选择头像" id='uploadImg'></p>
      <p> <img style="width:100px;height:100px;" src="http://localhost:3000/img/defaultImg.jpg" alt="stuImage" id="stuImageUpload"> </p>
    </div>
    <p><input type="button" value="确认新增" id="addStudentBtn" @click='addStudent()'></p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data(){
    return{
      addStudentData:{
        name:'',
        age:'',
        gender:'',
        classId:'',
        imagesName:''
      }
    }
  },
  methods:{
    async addStudent(){
      const {data} = await axios({
        url:'/students/addStudent',
        method:'post',
        data:this.addStudentData
      })
      if(data.status){
        alert(data.message);
        this.$emit('getStudents');
      }else{
        alert(data.message);
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
